// Colors
// ---------------------------

// Default palette

@colorOne: #2f1c1c; // dark
@colorTwo: #fff; // light
@colorThree: #B94A48; // accent
@colorFour: #5f7ebd; // accent2

// Themes
@themeDefault: #222;
@themeBlue: #131f2d;
@themeGreen: #232b1e;
@themeRed: #2f1c1c;


@darkGradientStart: lighten(@colorOne, 10%);
@darkGradientStop: lighten(@colorOne, 5%);
@lightGradientStart: darken(@colorTwo, 2%);
@lightradientStop: darken(@colorTwo, 7%);

@borderDark: darken(@colorTwo, 35%);

@lightFont: desaturate(lighten(@colorOne, 80%), 100%);
@darkFont: darken(@colorTwo, 80%);

// MIXINS
// ---------------------------

// clearfix
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

// Border radius
.border-radius(@topRight, @bottomRight, @bottomLeft, @topLeft){
	-webkit-border-radius: @topLeft @topRight @bottomRight @bottomLeft;
    -moz-border-radius: @topLeft @topRight @bottomRight @bottomLeft;
    border-radius: @topLeft @topRight @bottomRight @bottomLeft;
}

// Box shadow
.box-shadow(@shadow){
	-webkit-box-shadow: @shadow;
	-moz-box-shadow:    @shadow;
	box-shadow:         @shadow;
}

// Gradient
.gradient(@start: @lightGradientStart, @end: @lightradientStop) {
    background-color: mix(@start, @end, 60%);
    background-image: -moz-linear-gradient(top, @start, @end); // FF 3.6+
    background-image: -ms-linear-gradient(top, @start, @end); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @start, @end); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10
    background-image: linear-gradient(top, @start, @end); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@start,@end)); // IE9 and down
 }

 // Text shadow
 .text-shadow(@x: 1px, @y: 1px,@blur: 1px, @color: #000000){
	text-shadow: @x @y @blur @color;
    filter: dropshadow(color=@color, offx=@x, offy=@y);
 }

// Opacity
 .opacity(@opacity) {
  opacity: @opacity;
  filter: ~"alpha(opacity=@{opacity})";
}

// For custom buttons
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

.gradientBar(@primaryColor, @secondaryColor) {
 .gradient(@primaryColor, @secondaryColor);
  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}

.buttonBackground(@startColor) {
	@endColor: darken(@startColor, 10%);
  .gradientBar(@startColor, @endColor);
  *background-color: @endColor;
  .reset-filter();

  &:hover, &:active, &.active, &.disabled, &[disabled] {
    background-color: @endColor;
    *background-color: darken(@endColor, 5%);
  }

  &:active,
  &.active {
    background-color: darken(@endColor, 10%) e("\9");
  }
}

.buttonText(){
	color: #ffffff;
  	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  	&:hover{
  		color: #ffffff;
  		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  	}
}

.buttonTextDark(){
	color: #333;
  	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  	&:hover{
  		color: #333;
  		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  	}
}

.buttonTextColor(@color){
	color:darken(@color, 40%);
  	text-shadow: 0 -1px 0 lighten(@color, 5%);
  	&:hover{
  		color:darken(@color, 50%);
  		text-shadow: 0 -1px 0 lighten(@color, 0%);
  	}
}

// Custom bootstrap buttons
// - Gray
@grayBase: #333;
.btn-gray1{
	.buttonBackground(lighten(@grayBase, 0%));
	.buttonText();
}
.btn-gray2{
	.buttonBackground(lighten(@grayBase, 10%));
	.buttonText();
}
.btn-gray3{
	.buttonBackground(lighten(@grayBase, 20%));
	.buttonText();
}
.btn-gray4{
	.buttonBackground(lighten(@grayBase, 30%));
	.buttonText();
}
.btn-gray5{
	.buttonBackground(lighten(@grayBase, 40%));
	.buttonText();
}
.btn-gray6{
	.buttonBackground(lighten(@grayBase, 50%));
	.buttonTextDark();
}
.btn-gray7{
	.buttonBackground(lighten(@grayBase, 60%));
	.buttonTextDark();
}
.btn-gray8{
	.buttonBackground(lighten(@grayBase, 70%));
	.buttonTextDark();
}
// - Blue
@blueBase: #152865;
.btn-blue1{
	.buttonBackground(lighten(@blueBase, 0%));
	.buttonText();
}
.btn-blue2{
	.buttonBackground(lighten(@blueBase, 10%));
	.buttonText();
}
.btn-blue3{
	.buttonBackground(lighten(@blueBase, 20%));
	.buttonText();
}
.btn-blue4{
	.buttonBackground(lighten(@blueBase, 30%));
	.buttonText();
}
.btn-blue5{
	.buttonBackground(lighten(@blueBase, 40%));
	.buttonText();
}
.btn-blue6{
	.buttonBackground(lighten(@blueBase, 50%));
	.buttonTextDark();
}
.btn-blue7{
	.buttonBackground(lighten(@blueBase, 60%));
	.buttonTextDark();
}
.btn-blue8{
	.buttonBackground(lighten(@blueBase, 70%));
	.buttonTextDark();
}

// - Red
@redBase: #651515;
.btn-red1{
	.buttonBackground(lighten(@redBase, 0%));
	.buttonText();
}
.btn-red2{
	.buttonBackground(lighten(@redBase, 10%));
	.buttonText();
}
.btn-red3{
	.buttonBackground(lighten(@redBase, 20%));
	.buttonText();
}
.btn-red4{
	.buttonBackground(lighten(@redBase, 30%));
	.buttonText();
}
.btn-red5{
	.buttonBackground(lighten(@redBase, 40%));
	.buttonText();
}
.btn-red6{
	.buttonBackground(lighten(@redBase, 50%));
	.buttonTextDark();
}
.btn-red7{
	.buttonBackground(lighten(@redBase, 60%));
	.buttonTextDark();
}
.btn-red8{
	.buttonBackground(lighten(@redBase, 70%));
	.buttonTextDark();
}

// - Green
@greenBase: #124e0c;
.btn-green1{
	.buttonBackground(lighten(@greenBase, 0%));
	.buttonText();
}
.btn-green2{
	.buttonBackground(lighten(@greenBase, 10%));
	.buttonText();
}
.btn-green3{
	.buttonBackground(lighten(@greenBase, 20%));
	.buttonText();
}
.btn-green4{
	.buttonBackground(lighten(@greenBase, 30%));
	.buttonText();
}
.btn-green5{
	.buttonBackground(lighten(@greenBase, 40%));
	.buttonText();
}
.btn-green6{
	.buttonBackground(lighten(@greenBase, 50%));
	.buttonTextDark();
}
.btn-green7{
	.buttonBackground(lighten(@greenBase, 60%));
	.buttonTextDark();
}
.btn-green8{
	.buttonBackground(lighten(@greenBase, 70%));
	.buttonTextDark();
}



// Start style
html,body{
	background: url('../img/bg2.png') repeat;
	height:100%;
}

.style-toggler{
	position:absolute;
	left:-1px;
	background:#111;
	border:1px solid #111;
	.box-shadow(0 0 5px 1px #111);
	.border-radius(3px,3px,3px,3px);
	padding:10px 0;
	top:100px;
	z-index:1050;
	cursor:pointer;
}

.style-switcher{
	background:#111;
	border:1px solid #111;
	.box-shadow(0 0 5px 1px #111);
	.border-radius(3px,3px,3px,3px);
	left:-140px;
	top:100px;
	position:absolute;
	z-index:1050;
	color:#eee;
	padding:5px;


	ul{
		list-style-type: none;
		margin:10px 0;

		li{
			margin-top:8px;
			border:1px solid #111;
			&:first-child{
				margin-top:0;
			}

			a{
				display:block;
				padding:8px 15px;
				color:#fff;
				.border-radius(3px,3px,3px,3px);

				&.style{
					background:@themeDefault;
					&:hover{
						background:lighten(@themeDefault, 10%);
						text-decoration:none;
					}
				}
				&.blue{
					background:@themeBlue;
					&:hover{
						background:lighten(@themeBlue, 10%);
						text-decoration:none;
					}
				}
				&.green{
					background:@themeGreen;
					&:hover{
						background:lighten(@themeGreen, 10%);
						text-decoration:none;
					}
				}
				&.red{
					background:@themeRed;
					&:hover{
						background:lighten(@themeRed, 10%);
						text-decoration:none;
					}
				}
			}
		}
	}
}

.dropdown{
	&.open{
		.btn.dropdown-toggle{
			background:#fff;
			.box-shadow(none);
			border:1px solid #bbb;
			z-index:1001;
			border-bottom:0;
			.border-radius(0,0,0,0);
		}
	}
}

.dropdown > .dropdown-menu{
	&.custom{
		&.custom-dark{
			border-color:@colorOne;
			.box-shadow(0 0 10px @colorOne);
		}

		background:@colorTwo;
		border-color:darken(@colorTwo, 30%);
		.border-radius(0,0,0,0);
		.box-shadow(0 0 10px darken(@colorTwo, 30%));
		margin-top:-1px;
		li{
			float:none;
			&.custom{

				&.custom-hidden{
					display:none;
				}

				.clearfix();
				min-width:350px;

				&:hover{
					background:darken(@colorTwo, 8%);
				}

				.expand_custom{
					padding:5px 0;
					text-align:center;
					background:darken(@colorTwo, 10%);

					a{
						font-weight:bold;

						&:hover{
							text-decoration:underline;
						}
					}
				}

				.title{
					width:250px;
					padding:5px 10px;
					float:left;
					font-weight:bold;

					span{
						display:block;
						font-size:11px;
						font-weight:normal;

						a{
							font-size:12px;
							color:@colorThree;
						}
					}
				}

				.action{
					margin-top:10px;
					margin-right:10px;
					float:right;
				}

				a{
					display: inline-block;
					padding: 0;
					clear: none;
					font-weight: normal;
					line-height: 18px;
					color: @darkFont;
					white-space: nowrap;

					&:hover{
						background:none;
						text-decoration:none;
					}

					&.btn-mini{
						padding:2px 4px;

						img{
							margin:0;
						}

						&:hover{
							background:#e6e6e6;
						}
					}

					img{
						position:relative;
						left:0;
						top:0;
					}
				}
			}

			a{
				position:relative;

				&.fugue{
					padding-left:35px;
				}

				img{
					position:absolute;
					display:block;
					left:10px;
					top:4px;
					margin-right:3px;
				}

				&:hover{
					background:@colorThree;
				}
			}
		}
	}
}

.topbar{
	.clearfix();
	border:1px solid @colorOne;
	height:52px;
	.gradient(@darkGradientStart, @darkGradientStop);
	@shadow: inset 0 0 2px 2px lighten(@darkGradientStop, 7%);
    .box-shadow(@shadow);

	.company{
		float:left;
		margin:15px 0;
		display:block;
		color:@lightFont;
		font-size:24px;
		.text-shadow();

		&:hover{
			text-decoration:none;
		}
	}

	input{
		color:darken(@lightFont, 40%);
		margin-left:25px;
		background:url('../img/magnifier_grey.png') no-repeat 182px 6px lighten(@colorOne, 2%);
		border:0;
		margin-top:12px;
		width:195px;
		padding:7px 0 3px 7px;

		.border-radius(3px, 3px, 3px, 3px);

		@shadow: 1px 1px 1px lighten(@colorOne, 16%), inset 1px 1px 0px 1px @colorOne;
		.box-shadow(@shadow);

		&:focus{
			color:lighten(@lightFont, 90%);
			@shadow: 1px 1px 1px lighten(@colorOne, 16%), inset 1px 1px 0px 1px @colorOne;
			.box-shadow(@shadow);
		}
	}

	form{
		margin:0;
		float:left;
	}

	.mini{
		margin-top:12px;
		float:right;
		list-style-type:none;
		padding:0;

		&>li{
			float:left;
			margin-left:20px;
			background:lighten(@colorOne, 2%);
			position:relative;

			.border-radius(3px,3px,3px,3px);
			@shadow: 1px 1px 1px lighten(@colorOne, 16%), inset 1px 1px 0px 1px @colorOne;
			.box-shadow(@shadow);


			&:hover{
				background:@colorOne;
			}

			&.open{
				margin-left:18px;

				&>a{
					color:darken(@lightFont,90%);
					background:@colorTwo;
					border:1px solid @colorOne;
					border-bottom:0;

					img{
						.opacity(1);
					}

					&:hover{
						color:darken(@lightFont,90%);
					}
				}
			}

			&>a{
				color:darken(@lightFont, 40%);
				font-size:12px;
				line-height:20px;
				padding:5px 8px 3px 8px;
				display: block;
				position:relative;
				z-index:1001;

				img{
					margin-bottom:2px;
					margin-right:2px;
					.opacity(0.3);
				}

				.label{
					position:absolute;
					top:-5px;
					left:93%;
				}

				&:hover{
					text-decoration: none;
					color:lighten(@lightFont, 90%);

					img{
						.opacity(1);
					}
				}
			}
		}
	}	
}

.breadcrumbs{
	height:27px;
	border:1px solid @colorOne;
	border-top:0;
	background: @colorOne;

	@shadow: inset 0 0 2px 1px lighten(@colorOne, 6%), 0 1px 5px darken(@colorOne, 10%);
	.box-shadow(@shadow);

    .bread{
    	height:27px;
    	list-style-type:none;
    	margin:0;

    	li{
    		position:relative;
    		float:left;

    		a{
	    		display:block;
	    		color:darken(@lightFont, 40%);
	    		padding:5px 10px;

	    		i{
	    			.opacity(0.3);
	    		}

	    		&:hover{
	    			color:lighten(@colorOne, 90%);
	    			text-decoration:none;

	    			i{
	    				.opacity(1);
	    			}
	    		}

	    		&:after{
	    			content:'/';
	    			margin-left:15px;
	    		}
	    	}

	    	&:last-child{
	    		a{
	    			&:after{
	    				content:'';
	    			}
	    		}
	    	}

	    	&.active{
	    		a{
	    			color:lighten(@colorOne, 90%);
	    		}
	    	}
    	}
    }
}

.row-fluid{
	margin-top:10px;
	&.no-margin, &:first-child{
		&.force-margin{
			margin-top:0px;
		}
		margin-top:-9px;
	}
}

.navi{
	margin:20px 0 20px 20px;
	width:220px;
	float:left;

    .main-nav{
    	list-style-type: none;
    	margin:0;
    	padding:0;

    	&>li{
    		position:relative;
    		margin:1px;
    		&.open{
    			a{
    				.border-radius(3px, 0, 0, 3px);
    			}
    		}
    		&.active{
    			a{

    				&.light{
    					border:1px solid lighten(@colorOne, 2%);
				    	color:@lightFont;
						.gradient(@darkGradientStart, @darkGradientStop);
						.box-shadow(none);

					    .ico{
					    	@shadow: 1px 1px 1px lighten(@colorOne, 15%), inset 1px 1px 0 1px @colorOne;
							.box-shadow(@shadow);
							i{
								.opacity(1);
							}
					    }
    				}
	    		}
	    	}

    		a{
    			display:block;
    			padding:8px 8px 8px 45px;
    			border:1px solid @borderDark;
    			.border-radius(3px,3px,3px,3px);

    			img{
    				margin-top:7px;
    				float:right;
    				.opacity(0.7);
    			}

    			.label{
    				float:right;
    			}
    			
    			&.light{
    				color:@darkFont;
	    			.gradient();
	    			@shadow: inset 0 0 1px 1px @colorTwo;
	    			.box-shadow(@shadow);

				    .ico{
				    	@shadow: 1px 1px 1px lighten(@colorOne, 80%), inset 1px 1px 0 1px darken(@colorOne, 5%);
				    	.box-shadow(@shadow);
				    }

				    &:hover{
				    	border:1px solid lighten(@colorOne, 2%);
				    	color:@lightFont;
				    	.gradient(@darkGradientStart, @darkGradientStop);
				    	.box-shadow(none);

					    .ico{
					    	@shadow: 1px 1px 1px lighten(@colorOne, 15%), inset 1px 1px 0 1px @colorOne;
				    		.box-shadow(@shadow);
					    }

	    			}
    			}

    			&:hover{
    				text-decoration:none;
    				.ico{
					    i{
					   		.opacity(1);
					   	}
					}
    			}

    			.ico{
    				position:absolute;
    				top:5px;
    				left:8px;
    				float:left;
    				background:lighten(@colorOne, 2%);
					width:24px;
					height:24px;
					display:block;

					.border-radius(3px,3px,3px,3px);

					i{
						.opacity(0.5);
						margin-top:4px;
						margin-left:5px;
					}
    			}
    		}

    		.collapsed-nav{
    			&.closed{
    				display:none;
    			}

    			list-style-type: none;
    			margin:0 0 5px 0;
    			border:2px solid lighten(@colorOne, 5%);
    			border-top:0;
    			background:lighten(@colorOne, 5%);

    			.border-radius(0, 3px, 3px, 0);

			    li{
			    	margin:0;

			    	&.active{
			    		a{
			    			font-weight:bold;
			    		}
			    	}

			    	a{
			    		.border-radius(0,0,0,0);
						color:@darkFont;
		    			background: @colorTwo;
		    			padding:8px;
		    			border:0;

		    			&:before{
		    				content:'\00bb';
		    				color:@darkFont;
		    				margin-right:5px;
		    			}
			    	}
			    }
    		}
    	}
    }
}

.content{
	padding:20px 20px 100px 20px;
	overflow:hidden;
	.clearfix();

	.box{
		margin-top:20px;
		&:first-child{
			margin-top:10px;
		}
		border:1px solid @borderDark;
	   .border-radius(3px, 3px, 3px, 3px);
	  	background:#fff;

		.box-head{
			.label{
				float:right;
				margin-top:5px;
				margin-right:2px;
			}
			&.tabs{
				padding-right:6px;
				ul.nav-pills{
					margin:1px 0 0 0;
					float:right;
					li{
						a{
							padding:4px 8px;
						}
						&.active{
							a{
								background:@colorThree;
								color:#fff;
							}
						}
					}
				}

				ul.nav-tabs{
					margin:0;
					float:right;
					border:0;

					li{
						a{
							margin:0;
							padding:4px 12px;
							border:1px solid #ddd;
							border-left:0;
							.border-radius(0,0,0,0);
							color:#999;
							&:hover{
								color:#333;
							}
						}
						&.active{
							a{
								color:@colorThree;
							}
						}
						&:first-child {
							a{
								border-left:1px solid #ddd;
								.border-radius(0,0,3px,3px);
							}
						}
						&:last-child{
							a{
								.border-radius(3px,3px,0,0);
							}
						}
					}
				}
			}
			.clearfix();
			color:lighten(@darkFont, 15%);
			padding:6px 8px 6px 15px;
			border-bottom:1px solid @borderDark;
			.gradient();
			.border-radius(3px, 0, 0, 3px);
			
			h3{
				font-size:14px;
				float:left;
			}
			.actions{
				position:relative;
				margin-top:2px;
				float:right;

				&> ul{
					list-style-type: none;
					margin:0;
					.clearfix();

					&>li{
						float:left;
						margin-right:5px;
						&:last-child{
							margin-right:0;
						}

						&.open{
							a{
								position:relative;
								z-index:1001;
								.box-shadow(none);
								border-color:darken(@colorTwo, 30%);
								.border-radius(0,0,0,0);

								&.btn{
									background:@colorTwo;
									border-bottom:0;
								}
							}

							
						}
					}
				}
			}
		}

		.box-content{
			.clearfix();
			background:#fff;
			padding:15px;
			.border-radius(0, 2px, 2px, 0);
			.span-inbox{
				margin-left:0;
			}

			&.collapse{
				padding:0;

				&.in{
					padding:15px;
				}
			}

			.force-padding{
				padding:0 15px;
			}

			&.box-nomargin{
				padding:0;

				.alert{
					.border-radius(0,0,0,0);
					margin:0;
				}

				.table{
					margin:0;
				}
			}
		}
	}
}

.green{
	color:darken(#6a9d29, 20%);
}

.red{
	color:#962c2c;
}

.quickstats{
	.clearfix();
	list-style-type: none;
	margin:5px -5px;

	&.no-margin{
		margin:0;
	}

	li{
		margin:5px;
		float:left;
		color:@darkFont;
		white-space:nowrap;
		padding:8px 15px;
		.gradient();
		@shadow: inset 0 0 1px 1px @colorTwo;
		.box-shadow(@shadow);
		.border-radius(3px, 3px, 3px, 3px);
	    border:1px solid @borderDark;

		.small-chart{
			margin-top:5px;
			float:left;
		}

		.chart-detail{
			margin-left:10px;
			float:left;

			.amount{
				font-weight:bold;
				font-size:18px;
			}

			.description{
				display:block;
				text-align:center;
			}
		}
	}
}

.quicktasks{
	list-style-type: none;
	margin:5px -5px;

	&.no-margin{
		margin:0;
	}
	
	li{
		display:inline-block;
		text-align:center;
		margin:5px;

		a{
			color:@darkFont;
			display:block;
			white-space:nowrap;
			padding:8px 15px;
			.gradient();
			@shadow: inset 0 0 1px 1px @colorTwo;
			.box-shadow(@shadow);
			.border-radius(3px, 3px, 3px, 3px);
		    border:1px solid @borderDark;

			span{
				margin-top:5px;
				display:block;
			}

			&:hover{
				text-decoration:none;
				border:1px solid darken(@borderDark, 10%);
				.gradient(darken(@colorTwo, 5%), darken(@colorTwo, 15%));
			}
		}
	}
}

.flot{
	height:300px;
}

.messages{
	list-style-type:none;
	margin:0;
	padding:0;

	.clearfix();

	li{
		margin-top:15px;
		&:first-child{
			margin:0;
		}
		a img{
			.border-radius(3px,3px,3px,3px);
		}

		&.user1{
			a{
				float:left;
			}
			.info{
				margin-left:50px;
			}
		}

		&.user2{
			a{
				float:right;
			}
			.info{
				.arrow{
					background:url('../img/arrow-right.png') no-repeat;
					position:absolute;
					right:-5px;
					display:block;
					width:5px;
					height:9px;
					left:auto;
				}
				margin-right:50px;
				.detail .sender strong{
					color:@colorFour;
				}

				border-color: lighten(@colorFour, 10%);
			}
		}

		.info{
			.clearfix();
			position:relative;
			.arrow{
				background:url('../img/arrow-left.png') no-repeat;
				position:absolute;
				left:-5px;
				display:block;
				width:5px;
				height:9px;
			}

			.detail{
				.sender{
					strong{
						color:@colorThree;
					}
				}
				.time{
					float:right;
				}
				color:darken(@lightFont,30%);
			}

			background:#fff;
			border:1px solid lighten(@colorThree, 10%);
			padding:10px;
			.border-radius(3px, 3px, 3px, 3px);

			.message{
				margin-top:10px;
				color:lighten(@darkFont, 20%);

				p{
					border-top:1px solid darken(@colorTwo, 12%);
					padding:15px 5px;
					margin:0;

					&:first-child{
						padding-bottom:15px;
						border:0;
					}
				}
			}
		}
	}
}

.table{
	.table-unread td{
		font-weight:bold;
	}
	.table-checkbox{
		width:10px;
	}
	&.table-bordered{
		border-color:#bbb;
		border:0;
		.border-radius(0,0,0,0);
		thead{
			th{
				border-color:#bbb;
				.border-radius(0,0,0,0);
				&:first-child{
					border:0;
				}
			}
		}
		tbody{
			&:last-child tr:last-child td, &:first-child{
				.border-radius(0,0,0,0);
			}
			td{
				border-color:#bbb;
				&:first-child{
					border-left:0;
				}
			}
		}
	}
	thead{
		th{
			padding:4px;
			background-color:#f3f3f3;

			@shadow: inset 0 0 0 1px #fff;
			.box-shadow(@shadow);
			text-align:center;
			color:lighten(@darkFont, 20%);
			font-weight:normal;
			.text-shadow(0, 1px, 0, #fff);
		}
	}
	tbody{
		tr{
			td{
				vertical-align:middle;
			}
		}
		.actions{
			width:90px;
		}

		.actions_two{
			width:60px;
		}

		.actions_big{
			width:120px;
		}
	}
	&.dataTable{
		border-top:1px solid #bbb;
		border-bottom:1px solid #bbb;
		&.dataTable-noheader{
			border-top:0;
		}
		&.dataTable-nofooter{
			border-bottom:0;
		}
	}

	&.table-media{
		.table-image{
			width:66px;

			a{
				padding:2px;
				border:1px solid #ddd;
				display:block;
				float:left;
				.border-radius(2px,2px,2px,2px);

				&:hover{
					border-color:#999;
				}
			}
		}
	}
}

.label.label-hidden{
	display:none;
}

.gallery{
	.clearfix();
	margin:0 0 10px 0;
	list-style-type: none;

	&.gallery-detail{
		li{
			.info{
				margin:5px 3px;
				span{
					display:block;
				}
			}
		}
	}

	li{
		margin:10px 0 0 10px;
		float:left;
		border:1px solid #bbb;
		padding:3px;
		.border-radius(3px,3px,3px,3px);
	}
}

.warningTextareaInfo{
	color:@colorThree;
}

.pl_add{
	margin-right:5px;
}

.ui-spinner button {height:14px;position:absolute;background:none;border:none;width:18px;padding:0;background: url(../img/spinner_arrows.gif) no-repeat 0 -100px;cursor:pointer}
.ui-spinner .ui-spinner-up {top:0;right:0;background-position:0 0}
.ui-spinner .ui-spinner-down {top:14px;right:0;background-position:0 -14px}
.ui-spinner .ui-spinner-up:hover {background-position:-18px 0}
.ui-spinner .ui-spinner-down:hover {background-position:-18px -14px}
.ui-spinner input,.ui-spinner input:focus {margin-top:2px;display:block !important;-webkit-box-shadow:none !important;-moz-box-shadow:none !important;-ms-box-shadow:none !important;box-shadow:none !important; outline:none !important;}
.ui-spinner ul {margin:0}
.ui-spinner li {line-height:28px}
.ui-spinner{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);position:relative;font-size:13px;height:28px;line-height:28px;color:#555;background-color:#fff;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;overflow:hidden;}
.ui-spinner .ui-spinner-box {background: none;border: none !important}	

.dataTables_filter{
	float:left;
	margin:18px 15px 10px 15px;
	label input{
		.border-radius(1px,1px,1px,1px);
		background:url(../img/icons/fugue/magnifier.png) no-repeat 195px #fff;
	}
}

.dataTables_length{
	float:right;
	margin:19px 20px 9px 20px;
	label{

		.selector{
			margin-bottom:2px;
		}

	}
}

.dataTables_wrapper{
	.clearfix();
	background:#f1f1f1;
}

.dataTables_paginate{
	float:right;
	margin-right:20px;
}

.dataTables_info{
	margin:28px;
	float:left;
}

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
	cursor: pointer;
	padding:4px;
	background-color:#f3f3f3;

	@shadow: inset 0 0 0 1px #fff;
	.box-shadow(@shadow);
	text-align:center;
	color:lighten(@darkFont, 20%);
	font-weight:normal;
	.text-shadow(0, 1px, 0, #fff);
}

table.table thead .sorting { background: url('../img/sort_both.png') no-repeat center right #f3f3f3; }
table.table thead .sorting_asc { background: url('../img/sort_asc.png') no-repeat center right #f3f3f3; }
table.table thead .sorting_desc { background: url('../img/sort_desc.png') no-repeat center right #f3f3f3; }

table.table thead .sorting_asc_disabled { background: url('../img/sort_asc_disabled.png') no-repeat center right #f3f3f3; }
table.table thead .sorting_desc_disabled { background: url('../img/sort_desc_disabled.png') no-repeat center right #f3f3f3; }

table.table thead tr th:focus{
	outline:none;
}

#image_preview{
	position:absolute;
	display:none;
	.box-shadow(0 0 5px 1px #999);
	padding:2px;
	.border-radius(2px,2px,2px,2px);
	background:#fff;
}

.ico-prev{
	list-style-type: none;
	margin:0;

	li{
		margin-right:2px;
		float:left;
	}
}

.content .box-content .ui-slider-handle.ui-state-default {
	border:0;
	background:url(../img/slider.png) no-repeat;
}

.content .box-content .ui-slider-handle.ui-state-hover{
	background:url(../img/slider_hover.png) no-repeat;
}

.content .box-content .ui-slider-handle.ui-state-focus{
	outline:none;
}

#tooltip{
	position:absolute;
	background:#000;
	.opacity(0.7);
	padding:5px;
	color:#fff;
}

b.error{
	padding:0;
}

.error_page{
	text-align:center;
	.error{
		width:100%;
		.clearfix();
		position:absolute;
		top:40%;
		.opacity(0.5);
		color:#999;
		text-shadow: 0 -1px 1px #000, 0 1px 1px #FFFFFF;
	}
	.desc{
		width:100%;
		font-size:24px;
		color:#555;
		position:absolute;
		top:15%;
		line-height:35px;
	}
}

.table-with-action{
	.dataTables_wrapper{
		border-bottom:1px solid #bbb;
	}
}

.login_body{
	background:url(../img/bg2.png) repeat;

	.wrap{
		width:400px;
		background:#fff;
		position:absolute;
		top:50%;
		left:50%;
		height:320px;
		margin:-250px 0 0 -200px;
		.border-radius(8px,8px,8px,8px);
		.box-shadow(0 0 10px 0 #999);

		h2{
			margin:15px 20px 0 20px;
		}

		h4{
			margin:-3px 0 30px 20px;
			color:#999;
			font-size:14px;
		}

		form{
			margin:0;
		}

		.submit{
			.clearfix();
			button{
				float:right;
				margin-right:20px;
			}

			a{
				float:left;
				margin:7px 20px;
			}
		}

		.login{
			.remember{
				margin:15px 0 0 105px;
			}
			background:#eee;
			padding:10px;
			margin:5px 20px 20px 20px;
			.border-radius(6px,6px,6px,6px);
			.clearfix();
			.email{
				margin-top:5px;
			}
			.pw{
				margin-top:15px;
			}
			.email, .pw{
				.input-prepend{
					margin:0;
				}
				.clearfix();
				label{
					float:left;
					margin:10px 5px;
					font-weight:bold;
					width:80px;
				}
			}

			.email-input, .pw-input{
				float:right;
				padding:5px;
				background:#ddd;
				.border-radius(3px,3px,3px,3px);

				input{
					margin:0;
					width:190px !important;
				}
			}
		}
	}
}

.validate{
	.controls{
		.error{
			color:#B94A48;
		}
	}
}

.wizard{
	h4{
		margin:15px;
	}
	margin-bottom:0;

	.form-actions{
		margin-bottom:0;
	}

	.controls{
		.error{
			color:#B94A48;
		}
	}
}

ul.steps{
	list-style-type: none;
	margin:0 0 20px 0;
	.clearfix();
	display:block;
	width:100%;
	border-bottom:1px solid #bbb;
	background:#eee;

	li{
		margin:0;
		float:left;
		padding:10px 20px;
		font-size:14px;
		border-right:1px solid #bbb;
		color:#999;

		span{
			font-size:12px;
			display:block;
		}
		
		&.active{
			color:@colorThree;
			font-weight:bold;
			.gradient();
			.box-shadow(inset 0 0 1px 1px #fff);
			span{
				font-weight:normal;
				color:#333;
			}
		}
	}
}

@media (max-width: 1282px){
	.topbar{
		form{
			display:none;
		}
	}
}

@media (max-width: 979px){
	select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
		width:100px !important;
	}
	.content .box .box-head{
		ul.nav.nav-tabs{
			li{
				a{
					padding:2px 8px;
				}
			}
		}
	}
	.mini{
		display:none;
	}
	.navi{
		width:155px;

		.main-nav > li a{
			padding:8px 8px 8px 15px;
			.ico{
				display:none;
			}
		}
	}
}

@media (max-width: 767px){
	.content{
		padding: 50px 20px 100px 20px;
	}
	.style-switcher,.style-toggler{
		display:none;
	}
	.navi{
		z-index:1099;
		display: block;
		position: absolute;
		top: 82px;
		border-top:1px solid #444;
		margin: 0;
		width: 100%;
		.box-shadow(0 1px 5px #222);
		.main-nav{
			li{
				margin:0;
				display:none;
				a{
					.border-radius(0,0,0,0);
				}
				&.open{
					a{
						.border-radius(0,0,0,0);
					}
				}
				&.active{
					display:block;
				}
				.collapsed-nav{
					display:none;
					margin:0;
				}
			}
		}
	}
}

@media(max-width: 467px){
	.mobile-hide{
		display:none
	}

	.login_body{
		.wrap{
			width:300px;
			margin-top:-180px;
			margin-left:-150px;
			height:335px;

			.login{
				.email, .pw{
					input{
						width:100px !important;
					}
				}
			}
		}
	}
}